<section id="business">
  <div class="row" *ngIf="error">
    <div class="col-sm-12">
      {{error}}
    </div>
  </div>

  <div class="row" *ngIf="!loaded && !error">
    <div class="col-sm-12 page-load">
      <div class="loading-indicator"></div>
    </div>
  </div>

  <div class="row" *ngIf="loaded">
    <div class="col-md-8 col-sm-7">
      <h1 class="business-title">{{record.legalName}}</h1>

      <a [routerLink]="'/' | localize" class="title-back-link mrgn-bttm-md"><span class="fa fa-arrow-left"></span> {{'search.return-link' | translate}}</a>

      <div class="row">
        <!-- div class="col-md-6 business-info">
          <div class="form-group">
            <label class="control-label" translate>org.identifier</label>
            <div class="form-field">
              {{record.orgId}}
            </div>
          </div>
          <div class="form-group">
            <label class="control-label" translate>org.type</label>
            <div class="form-field">
              {{record.typeName}}
            </div>
          </div>
        </div -->
        <div class="col-md-6 business-info">
          <div class="form-group">
            <label class="control-label" translate>org.locations</label>
            <div class="form-field">
              <div class="field-value" *ngFor="let loc of locations">
                <!--small class="text-muted">{{loc.typeName}}</small><br-->
                <!-- span *ngIf="loc.addressee != null">{{loc.addressee}}<br></span -->
                {{loc.unitNumber && ('' + loc.unitNumber + '-')}}{{loc.streetAddress}}<br>
                {{loc.municipality}}, {{loc.province}}&nbsp; {{loc.postalCode}}<br>
                {{loc.country}}
                <div class="map-link"><span class="fa fa-map-marker"></span> <a href="#" class="small" translate>general.map-link</a></div>
              </div>
              <div *ngIf="!locations.length">
                <em class="text-muted" translate>general.none</em>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row" *ngFor="let dba of dbas">
        <hr>
        <div class="col-sm-6 business-info">
          <div class="form-group">
            <label class="control-label" translate>org.dba</label>
            <div class="form-field">
              <div class="field-value">{{dba.dbaName}}</div>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label" translate>org.effective-date</label>
            <div class="form-field">
              <div class="field-value">{{dba.effectiveDate}}</div>
            </div>
          </div>        </div>
        <div class="col-md-6 business-info" *ngIf="dba.locations.length">
          <div class="form-group">
            <label class="control-label" translate>org.locations</label>
            <div class="form-field">
              <div class="field-value" *ngFor="let loc of dba.locations">
                <!--small class="text-muted">{{loc.typeName}}</small><br-->
                <span *ngIf="loc.addressee != null">{{loc.addressee}}<br></span>
                {{loc.unitNumber && ('' + loc.unitNumber + '-')}}{{loc.streetAddress}}<br>
                {{loc.municipality}}, {{loc.province}}&nbsp; {{loc.postalCode}}<br>
                Canada
                <div class="map-link"><span class="fa fa-map-marker"></span> <a href="#" class="small" translate>general.map-link</a></div>
              </div>
              <div *ngIf="!dba.locations.length">
                <em class="text-muted" translate>general.none</em>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-5 hidden-xs">
      <div class="business-badge">
        <img src="assets/ribbon.svg" [alt]="'general.verified' | translate">
      </div>
    </div>
  </div>

  <div class="row mrgn-tp-md mrgn-bttm-lg business-certs" *ngIf="loaded">
    <hr>
    <div class="col-sm-12">
      <label class="control-label"><span class="field-name" translate>org.certs-title</span> <span class="fa fa-question-circle text-muted"></span></label>
      <div class="certs-outer">
        <div *ngFor="let grp of certs" class="cert">
          <div class="panel cert-panel">
            <div class="cert-name panel-heading">
              <h3 class="panel-title"><div><a [routerLink]="['cert', grp.top.id] | localize">{{grp.top.typeName}}</a></div></h3>
            </div>
            <div class="panel-body cert-main">
              <div class="cert-info">
                <div class="issuer">{{grp.top.issuer.name}}</div>
                <div class="year">{{grp.top.effectiveDate}}</div>
                <div class="others text-muted" *ngIf="grp.top.inactiveReason && grp.top.inactiveReason.id">
                  <strong class="text-danger">{{grp.top.inactiveReason.shortReason}}</strong>
                </div>
                <div class="others text-muted" *ngIf="grp.others.length">
                  <em>And {{grp.others.length}} related</em>
                </div>
              </div>
              <div class="cert-image">
                <a [routerLink]="['cert', grp.top.id] | localize">
                  <img src="assets/cert.svg" [class]="'color-' + grp.top.color" alt="">
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div *ngIf="!certs.length">
        <em class="text-muted" translate>general.none</em>
      </div>
    </div>
  </div>
</section>
